<template>
  <f7-page>
    <f7-navbar title="选择时间" back-link="Back"></f7-navbar>
    <mt-datetime-picker ref="picker" type="time" v-model="pickerValue"></mt-datetime-picker>
    <f7-list>
      <f7-list-input
        label="入住时间"
        type="date"
        placeholder="请输入开始时间"
        :value="startdate"
        @input="startdate = $event.target.value"
      ></f7-list-input>
      <f7-list-input
        label="离开时间"
        type="date"
        placeholder="请输入结束时间"
        :value="enddate"
        @input="enddate = $event.target.value"
      ></f7-list-input>
    </f7-list>
    <f7-button fill raised @click="select">查询</f7-button>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      startdate: "",
      enddate: "",
      pickerValue: "",
      day: ""
    };
  },
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    select() {
      const self = this;
      const app = self.$f7;
      var currentdate = new Date(new Date().toLocaleDateString()).getTime();
      var startdate = new Date(this.startdate).getTime();
      var enddate = new Date(this.enddate).getTime();
      var day = (enddate - startdate) / 1000 / 60 / 60 / 24;
      if (
        enddate - startdate >= 0 &&
        startdate - currentdate >= 0 &&
        enddate - currentdate >= 0
      ) {
        let apiData = {
          startdate: this.startdate,
          enddate: this.enddate,
          day: day
        };
        this.$store.commit("setDate", apiData);
        this.$f7router.navigate("/queryresults/");
      } else {
        app.dialog.alert("请输入正确的开始日期和结束日期");
      }
    }
  }
};
</script>
<style scoped>
</style>
